<template>
  <div>
    <myhead></myhead>
    <div class="box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>礼品</el-breadcrumb-item>
      </el-breadcrumb>
      <template>
        <el-carousel indicator-position="outside">
          <el-carousel-item v-for="(item,index) in imgArr" :key="index">
             <img :src="item" alt="..." />
          </el-carousel-item>
        </el-carousel>
      </template>
      <div class="category">
          <a href="#" class="category-item">
              <div class="category-item-box">
                  <div class="category-item-name">
                      新品上新
                        <span class="scon scon-1">new</span>
                  </div>
                  <div class="category-item-green">
                      又有美美的礼品上新啦!
                  </div>
              </div>
          </a>
          <a href="#" class="category-item">
              <div class="category-item-box">
                  <div class="category-item-name">
                      施华洛世奇
                        <span class="scon scon-2">sale</span>
                  </div>
                  <div class="category-item-green">
                      国际品质 大牌保证
                  </div>
              </div>
          </a>
          <a href="#" class="category-item">
              <div class="category-item-box">
                  <div class="category-item-name">
                      Hello Kitty
                        <span class="scon scon-3">cute</span>
                  </div>
                  <div class="category-item-green">
                      没有比这里更萌的啦!
                  </div>
              </div>
          </a>
      </div>
          <div class="navbar">
      <ul>
        <li @click="currindex = 0">
          <router-link to="chocolates" :class="{ active: currindex == 0 }">
            <a href=""></a>
            <br />
            全部
          </router-link>
        </li>
        <li @click="currindex = 1">
          <router-link to="chocolates" :class="{ active: currindex == 1 }">
            <a href=""></a>
            <br />
            音乐盒
          </router-link>
        </li>
        <li @click="currindex = 2">
          <router-link to="chocolates" :class="{ active: currindex == 2 }">
            <a href=""></a>
            <br />
            金箔花
          </router-link>
        </li>
        <li @click="currindex = 3">
          <router-link to="chocolates" :class="{ active: currindex == 3 }">
            <a href=""></a>
            <br />
            3D水晶内雕
          </router-link>
        </li>
        <li @click="currindex = 4">
          <router-link to="chocolates" :class="{ active: currindex == 4 }">
            <a href=""></a>
            <br />
            首饰/美妆
          </router-link>
        </li>
        <li @click="currindex = 5">
          <router-link to="chocolates" :class="{ active: currindex == 5 }">
            <a href=""></a>
            <br />
            巧克力
          </router-link>
        </li>
        <li @click="currindex = 6">
          <router-link to="chocolates" :class="{ active: currindex == 6 }">
            <a href=""></a>
            <br />
            公仔/睡枕
          </router-link>
        </li>
        <li @click="currindex = 7">
          <router-link to="chocolates" :class="{ active: currindex == 7 }">
            <a href=""></a>
            <br />
            其他/摆件
          </router-link>
        </li>
      </ul>
    </div>
    <myside></myside>
    <myfoot></myfoot>
    </div>
  </div>
</template>

<script>
import myhead from "../../components/Header/header";
import myfoot from "../../components/Footer/footer";
import myside from "../../components/Side/side";
export default {
  components: { myhead, myfoot, myside },
  data() {
      return {
          imgArr:[
              require('../../assets/images/giftsimg/lipin_01_1076103.jpg'),
              require('../../assets/images/giftsimg/lipin_02_1077027.jpg')
          ]
      }
  },
};
</script>

<style lang='less' scoped>
.box {
  width: 1200px;
  margin: 0 auto;
  .el-breadcrumb {
    font-size: 12px;
    line-height: 30px;
  }
}
a{
    color: black;
    &:hover{
        color: black;
        text-decoration: none;
    }
}
.category{
    margin: 5px 0;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    .category-item{
        width: 396px;
        height: 128px;
        padding: 10px 20px;
        float: left;
        &:nth-of-type(1){
            background: url('../../assets/images/giftsimg/category-1.jpg') ;
        }
        &:nth-of-type(2){
            background: url('../../assets/images/giftsimg/category-3.jpg') ;
        }
        &:nth-of-type(3){
            background: url('../../assets/images/giftsimg/swarovski-pc.png') ;
        }
        &:hover{
            background-position-x: -10px;
        }
    }
    .category-item-box{
        width: 168px;
        .category-item-name{
            font-size: 22px;
            line-height: 48px;
            border-bottom: 2px solid #bcbcbc;
            .scon{
                width: 48px;
                height: 24px;
                line-height: 24px;
                text-align: center;
                font-size: 14px;
                vertical-align: middle;
                display: inline-block;
                background: url(//img02.hua.com/pc/assets/img/gifts/gifts-sprite.png) no-repeat center center;
            }
            .scon-1{
                background-position: -48px -56px;
            }
            .scon-2{
                background-position: -96px -56px;
            }
            .scon-3{
                background-position: -144px -56px;
            }
        }
        .category-item-green{
            margin-top: 10px;
        }
    }
}
// 轮播图
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.el-carousel__indicators--outside{
    position: absolute;
}
.navbar {
  width: 1200px;
  margin: 20px auto;
  ul {
    width: 1300px;
    height: 77px;
    display: flex;
    justify-content: space-between;
    margin-left: -50px;
    font-size: 16px;
    li {
      width: 12.5%;
      text-align: center;
      list-style: none;
      a {
        color: gray;
        text-decoration: none;
      }
    }
    li:nth-of-type(1) a > a {
      display: inline-block;
      width: 50px;
      height: 50px;
      background: url(../../assets/images/chocolateimg/gifts-sprite.png) -2px 2px
        no-repeat;
    }
    li:nth-of-type(2) a > a {
      display: inline-block;
      width: 50px;
      height: 50px;
      background: url(../../assets/images/chocolateimg/gifts-sprite.png) -59px -4px
        no-repeat;
    }
    li:nth-of-type(3) a > a {
      display: inline-block;
      width: 50px;
      height: 50px;
      background: url(../../assets/images/chocolateimg/gifts-sprite.png) -113px -4px
        no-repeat;
    }
    li:nth-of-type(4) a > a {
      display: inline-block;
      width: 50px;
      height: 50px;
      background: url(../../assets/images/chocolateimg/gifts-sprite.png) -165px -4px
        no-repeat;
    }
    li:nth-of-type(5) a > a {
      display: inline-block;
      width: 50px;
      height: 50px;
      background: url(../../assets/images/chocolateimg/gifts-sprite.png) -227px -4px
        no-repeat;
    }
    li:nth-of-type(6) a > a {
      display: inline-block;
      width: 50px;
      height: 50px;
      background: url(../../assets/images/chocolateimg/gifts-sprite.png) -282px -4px
        no-repeat;
    }
    li:nth-of-type(7) a > a {
      display: inline-block;
      width: 50px;
      height: 50px;
      background: url(../../assets/images/chocolateimg/gifts-sprite.png) -338px -4px
        no-repeat;
    }
    li:nth-of-type(8) a > a {
      display: inline-block;
      width: 50px;
      height: 50px;
      background: url(../../assets/images/chocolateimg/gifts-sprite.png) -394px -4px
        no-repeat;
    }
    li a:hover {
      color: orange;
    }
    .active {
      color: orange;
    }
  }
}
</style>